<div class="user-profile-dialog min-w-[300px] md:min-w-[500px]">

  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-user header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">User Profile</h2>
      <p class="panel-description">
        Manage your account information and security settings
      </p>
    </div>
    <p-button
      icon="pi pi-times"
      [text]="true"
      [rounded]="true"
      severity="secondary"
      (onClick)="closeDialog()"
      styleClass="close-button">
    </p-button>
  </div>

  <div class="form-container">
    <div class="form-section">
      <h3 class="section-title">
        <i class="pi pi-id-card"></i>
        Basic Information
      </h3>

      <div class="form-field">
        <label class="field-label">Username</label>
        <input
          disabled
          id="username"
          type="text"
          pInputText
          [(ngModel)]="editUserData.username"
          class="field-input"
          placeholder="Username..."/>
      </div>

      <div class="form-field">
        <label class="field-label">Full Name</label>
        <input
          [disabled]="!isEditing"
          id="fullname"
          type="text"
          pInputText
          [(ngModel)]="editUserData.name"
          class="field-input"
          placeholder="Enter full name..."/>
      </div>

      <div class="form-field">
        <label class="field-label">Email</label>
        <input
          [disabled]="!isEditing"
          id="email"
          type="email"
          pInputText
          [(ngModel)]="editUserData.email"
          class="field-input"
          placeholder="Enter email..."/>
      </div>

      <div class="edit-actions">
        @if (!isEditing) {
          <p-button label="Edit Profile" severity="info" icon="pi pi-pencil" [outlined]="true" (onClick)="toggleEdit()"></p-button>
        }
        @if (isEditing) {
          <div class="edit-buttons">
            <p-button label="Cancel" severity="secondary" [outlined]="true" icon="pi pi-times" (onClick)="toggleEdit()"></p-button>
            <p-button label="Save Changes" severity="success" [outlined]="true" icon="pi pi-check" (onClick)="updateProfile()"></p-button>
          </div>
        }
      </div>
    </div>

    <div class="gradient-divider"></div>

    <div class="form-section">
      <h3 class="section-title">
        <i class="pi pi-shield"></i>
        Security Settings
      </h3>

      <form [formGroup]="changePasswordForm" (ngSubmit)="submitPasswordChange()">
        <div class="form-field">
          <label class="field-label" for="currentPassword">Current Password</label>
          <p-password
            id="currentPassword"
            formControlName="currentPassword"
            [feedback]="false"
            class="field-input"
            [inputStyle]="{'width': '100%'}">
          </p-password>
          @if (changePasswordForm.get('currentPassword')?.invalid &&
                (changePasswordForm.get('currentPassword')?.dirty || changePasswordForm.get('currentPassword')?.touched)) {
            <small class="field-error">
              <i class="pi pi-exclamation-circle"></i>
              @if (changePasswordForm.get('currentPassword')?.errors?.['required']) {
                <span>Current password is required.</span>
              }
            </small>
          }
        </div>

        <div class="form-field">
          <label class="field-label" for="newPassword">New Password</label>
          <p-password
            id="newPassword"
            formControlName="newPassword"
            [feedback]="false"
            class="field-input"
            [inputStyle]="{'width': '100%'}">
          </p-password>
          @if (changePasswordForm.get('newPassword')?.invalid &&
                (changePasswordForm.get('newPassword')?.dirty || changePasswordForm.get('newPassword')?.touched)) {
            <small class="field-error">
              <i class="pi pi-exclamation-circle"></i>
              @if (changePasswordForm.get('newPassword')?.errors?.['required']) {
                <span>New password is required.</span>
              }
              @if (changePasswordForm.get('newPassword')?.errors?.['minlength']) {
                <span>Password must be at least 6 characters long.</span>
              }
            </small>
          }
        </div>

        <div class="form-field">
          <label class="field-label" for="confirmNewPassword">Confirm New Password</label>
          <p-password
            id="confirmNewPassword"
            formControlName="confirmNewPassword"
            [feedback]="false"
            styleClass="field-input"
            [inputStyle]="{'width': '100%'}">
          </p-password>
          @if (changePasswordForm.get('confirmNewPassword')?.invalid &&
                (changePasswordForm.get('confirmNewPassword')?.dirty || changePasswordForm.get('confirmNewPassword')?.touched)) {
            <small class="field-error">
              <i class="pi pi-exclamation-circle"></i>
              @if (changePasswordForm.get('confirmNewPassword')?.errors?.['required']) {
                <span>Please confirm your new password.</span>
              }
            </small>
          }
          @if (changePasswordForm.errors?.['passwordMismatch'] &&
                changePasswordForm.get('confirmNewPassword')?.touched) {
            <small class="field-error">
              <i class="pi pi-exclamation-circle"></i>
              <span>Passwords do not match.</span>
            </small>
          }
        </div>

        <div class="password-actions">
          <p-button type="submit" severity="info" [outlined]="true" label="Change Password" icon="pi pi-key" [disabled]="changePasswordForm.invalid"></p-button>
        </div>
      </form>
    </div>
  </div>

</div>

@if (!currentUser) {
  <div class="loading-state">
    <i class="pi pi-spin pi-spinner loading-icon"></i>
    <p>Loading user data...</p>
  </div>
}
